<extend name="common/base" />
<block name="resource">
    <link href="__PUBLIC__/Home/ui3/css/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
    <link href="__PUBLIC__/Home/ui3/css/videoCommon.css?v=1.0.1" rel="stylesheet">
    <link href="__PUBLIC__/Home/ui3/css/video.css?v=1.0" rel="stylesheet">
    <link href="__PUBLIC__/Home/ui3/css/leftCommon.css?v=1.0.1" rel="stylesheet">

    <script type="text/javascript" src="__PUBLIC__/Home/ui3/js/lib/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="__PUBLIC__/Home/ui3/js/jwplayer/jwplayer.js?v=1.0"></script>
    <script src="__PUBLIC__/Home/ui3/js/zclip/jquery.zclip.min.js"></script>

    <script src="__PUBLIC__/Home/ui3/js/face.js" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/emotion.js?v=1.0"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/scroll.js?v=1.0"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/search/videoCommon.js?v=1.0.6"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/search/video.js?v=1.0"></script>
    <script type="text/javascript">
        window._THIS = {
            searchHotUrl : "{:U('api/search/hot', ['per' => 10])}",
            searchVideoUrl : "{:U('search/video')}",
            searchVideoApi : "{:U('api/search/keywords')}",
            searchUserUrl : "{:U('search/user')}",
            searchUserApi : "{:U('api/search/users')}",
            recommendUrl : "{:U('share/video')}",
            userLink : "{:U('others/index')}",
            videoLink : "{:U('share/video')}",
            favourUrl : {
                add : "{:U('favour/add')}",
                undo : "{:U('favour/undo')}",
            },
            likeUrl : {
                dolike : "{:U('like/dolike')}",
                unlike : "{:U('like/unlike')}",
            },
            followUrl : {
                dofollow : "{:U('follow/dofollow')}",
                unfollow : "{:U('follow/unfollow')}",
            },
            commentUrl : {
                get : "{:U('video/getCommentList')}",
                post : "{:U('video/comments')}",
            },
            setPlayUrl : "{:U('api/video/setPlay')}",
            resultPager : {$resultPager},
            commentPager : 20,
            timestamp : 0,
            keywords : "{$keywords}",
        };
        function dataInit() {
            var user = {$userInfo|json_encode};
            if (user) {
                viewModel.self({
                    'id' : user.id,
                    'avatar' : user.avatar ? user.avatar : _COMMON.DEFAULT_AVATAR,
                    'nickname' : user.nickname,
                });
            }

            if (_THIS.keywords) {
                searchVideo();
                searchUser();
            } else {
                var videos = {$videos|json_encode};
                viewModel.videoList(getVideos(videos));
                viewModel.isPending(false);
                $('.JS-poster').lazyload();
                setTimeout(function(){
                    $('.JS-poster').lazyload();
                }, 500);
            }
        }
    </script>
    <style>
        .item-play{
              display: table-cell;
             position: relative;
             text-align: center;
             vertical-align: middle;
             background:#000;
        }
        .item-play img{
             height: auto;
            margin: auto;
            max-height: 100%;
            max-width: 100%;
            position: static;
            width: auto;
            z-index:1000;
        }
        .item-play  .video-play{
              position:absolute;
              left:0;
              top:0;
              background: rgba(0, 0, 0, 1) none repeat scroll 0 0;
        }
    </style>
</block>

<block name="content">
    <div class="subnav">
        <div class="container">
            <div class="subnav-left"></div>
            <div class="subnav-right">
                <div class="input1">
                    <input type="text" placeholder="输入关键字搜索" value="{$keywords}"/>
                    <i class="cha" title="清空搜索"></i>
                </div>
                <button class="btn3" title="搜索视频">搜索</button>
                <div class="btn-group">
                    <button class="btn1" title="找视频">找视频</button>
                    <button class="btn2" title="找人" data-bind="click:toSearchUserPage">找人</button>
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="main-left">
                <div class="shadow"></div>
                <!-- ko if:userList().length > 0 -->
                <div class="all-say">
                    <div class="all-title">
                        <div class="title-content">相关用户</div>
                        <span></span>
                    </div>
                    <!-- ko foreach:userList -->
                    <div class="all-say-item">
                        <div class="item-info">
                            <div class="item-avatar relative">
                                <a href="" data-bind="attr:{'href':userLink}">
                                    <img src="" alt="" data-bind="attr:{'src':avatar, 'alt':nickname}"/>
                                    <!-- ko if:auth -->
                                    <img src="" title="" data-bind="attr:{'src':auth.pic,'title':auth.name}" class="newG-icon">
                                    <!-- /ko -->
                                </a>
                            </div>
                            <div class="item-info1">
                                <div class="name">
                                    <a href="" data-bind="attr:{'href':userLink}">
                                        <div class="nick overflow" data-bind="text:nickname"></div>
                                    </a>
                                    <!-- ko if:gender == '男' -->
                                        <i class="male"></i>
                                    <!-- /ko -->
                                    <!-- ko if:gender == '女' -->
                                        <i class="female"></i>
                                    <!-- /ko -->
                                </div>
                                <div class="level" data-bind="text:level">LV.0</div>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
                <!-- /ko -->
                <div class="left-position">
                    <div class="all-search">
                        <div class="all-title">
                            <div class="title-content">大家都在搜</div>
                            <span></span>
                        </div>
                        <div class="search-list">
                            <ul data-bind="foreach:hot">
                                <li title="" data-bind="attr:{'title':text}">
                                    <a href="" data-bind="attr:{'href':link}">
                                        <i class="rank" data-bind="text:$index()+1"></i>
                                        <div class="gname" data-bind="text:text"></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-right">
                <!-- ko if:(videoList().length == 0 && !isPending()) -->
                <div class="list-item-null">
                    <div class="null-img"></div>
                    <div class="null-info">很遗憾，没有找到相关，试试其他的吧...</div>
                </div>
                <!-- /ko -->
                <!-- ko if:videoList().length > 0 -->
                <div class="right-box row" data-bind="foreach:videoList">
                    <div class="list-item col-lg-3 col-md-4 col-xs-4 JS_video_item" data-bind="event:{mouseover:play.preview, mouseout:play.pause}, click:play.doPlay">
                        <div class="item-play">
                            <div class="video-play" style="display:none;">
                                <video loop="loop" data-bind="attr:{'src':src}"></video>
                            </div>
                            <img class="JS-poster" src="__PUBLIC__/Home/ui3/images/lazyload-16-9+40.png" data-original="" data-bind="attr:{'data-original':thumb}"/>
                        </div>
                        <div class="item-title" data-bind="text:title"></div>
                        <div class="item-infos">
                            <div class="author"><i class="author-images"></i>
                                <div class="author-name overflow" data-bind="text:user.nickname"></div>
                            </div>
                            <div class="times"><i class="times-images"></i>
                                <div class="times-num" data-bind="text:play.count"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /ko -->
                <!-- ko if:isPending -->
                <div class="load-comment">
                    <i><img src="__PUBLIC__/Home/ui3/images/loading.gif" alt="正在加载，请稍候..."/></i>
                    <span>正在加载，请稍候...</span>
                </div>
                <!-- /ko -->
            </div>
        </div>
        <div class="backTop" id="backTop" title="返回顶部">
            <a href="javascript:void(0);"></a>
        </div>
    </div>
    <include file="Search/player" />
</block>

